<template>
	<view>
		<view class="title"  @click="handleChangeDate">
		  {{today}}<u-icon name="arrow-down"></u-icon>
		</view>
		<view class="content">
		<u-cell-group>
			 <u-cell-item  v-for="item in list" :key='item.id'  @click="handlePreview(item)">
				<template v-slot:title>
					打卡时间：{{formatTime(item.checkTime)}}
				</template>
				 <template v-slot:label>
					<u-tag :text="item.remark" :type="checkTypeList[item.checkTypeId]" />
				 </template>
			</u-cell-item>
		</u-cell-group>
		<u-calendar v-model="show" @change="handleDateChange" mode="date"></u-calendar>
		</view>
	</view>
</template>

<script>
	import {getCheckList} from '@/api/user-api.js'
	export default{
		data(){
			return{
				show:false,
				today:new Date(),
				list:[],
				checkTypeList:{
				  "0":"success",//正常的上下班打卡按照时间是否过12点来分开
				  "1":"error",//只有在考勤范围内我们来确定是否是迟到，在范围内切过了上班时间
				  "2":"error",//在范围内且没到下班时间并且过了中午
				  "3":"warning"//如果不在考勤范围内
				},
			}
		},
		async onShow(){
			let now = new Date()
			let year = now.getFullYear()
			let month = now.getMonth()+1
			let day = now.getDate()
			this.today = year +'-'+( month<10?("0"+month):month)+'-'+( day<10?("0"+day):day)
			let res = await this.getCheckListAll(this.today)
			if(res.data.code == 200){
				this.list = res.data.data.list
			}
		},
		computed:{
		  formatTime(){
		    return function(time){
		      let d = new Date(Number(time))
		      return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
		    }
		  }
		},
		methods:{
		  async getCheckListAll(date){
		    let res = await getCheckList({date})
		    return res
		  },
		  async handleChangeDate(){
		    this.show = true
		  },
		  async handleDateChange(date){
		    console.log(date)
		    this.today = date.result
		    await this.getCheckListAll(this.today)
		  },
		  handlePreview(item){
		    console.log(item)
		    //小程序里面跳页只能用？进行拼接参数，在新页面的onLoad函数中直接能拿到对象
		    uni.navigateTo({
		      url:`/pages/me/check-info?id=${item.id}`
		    })
		  }
		}
	}
</script>

<style lang="scss">
	.title{
		text-align: center;
		box-shadow:0 3rpx 20px 0px #000;
		border-bottom:1rpx solid #eee;
		padding: 10rpx 30rpx;
	}
</style>
